<script setup lang="ts">
import type { ITableObj, ITableProp } from '@/type/interfaces'
interface IProps {
  tableProp?: ITableProp
  tableObj: ITableObj
}
const props = withDefaults(defineProps<IProps>(), {
  tableProp: () => {
    return {
      width: '100%',
      stripe: true,
      size: '',
    }
  }
})
const config = ref<ITableProp>({})
const handleEdit = (index: number, row: any) => {
  console.log('handleEdit', index, row);
}
const handleDelete = (index: number, row: any) => {
  console.log('handleDelete', index, row);
}
const init = () => {
  console.log('tableObj', props.tableObj.data.length);

  if (props.tableProp) {
    Object.assign(config.value, props.tableProp)
  }
}
init()
</script>
<template>
  <div class="table1-container">
    <el-table :data="tableObj.data" :style="{ width: config.width }" size="small">
      <el-table-column type="index" fixed="left" label="行" />
      <el-table-column v-for="(item, index) in tableObj.columnConfig" :key="index" :column-key="index + ''"
        :prop="item.prop" :label="item.name" :width="item.width" />
      <el-table-column label="action" :width="tableProp.actionWidth" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <narration>
      <div class="">行固定左侧，action固定右侧</div>
      <div>tableObj.data 缓存渲染数据</div>
      <div>tableObj.columnConfig 配置字段属性和el-table-column支持的API</div>
      <div>tableProp 支持自定义配置table属性</div>
    </narration>
  </div>
</template>